<template>
  <div>
    <a-modal
      v-model:open="visible"
      :mask-closable="false"
      width="80%"
      title="会员等级"
      :style="{ top: '20px' }"
      :footer="null"
      destroyOnClose
    >
      <div v-if="visible" v-permission="['base-data:member-level-detail:query']">
        <member-level-detail :memberId="memberId" />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import MemberLevelDetail from '@/views/base-data/member-level-detail/index.vue';

  // 组件参数
  const props = defineProps({
    // 会员ID
    memberId: {
      type: String,
      required: true,
    },
  });

  // 会员等级详情组件
  const memberLevelDetail = ref();

  // 弹窗是否可见
  const visible = ref(false);

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
